<template>
  <el-main style="background-color:#fff">
    <el-table
      :data="table.data"
      style="width: 100%"
    >
      <el-table-column
        fixed
        prop="id"
        label="序号"
        width="200"
        sortable="custom"
      />
      <el-table-column
        prop="name"
        label="采集器名称"
      />
      <el-table-column
        prop="state"
        label="采集器状态"
      />
    </el-table>

    <br>

    <el-pagination
      background
      layout="total, sizes, prev, pager, next"
      :total="table.total"
      :page-size="table.query.limit"
      @current-change="handleChangePage"
      @size-change="handleChangeLimit"
    />
  </el-main>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { IP_LIST } from '../../../ip.config.js'

const table = ref({
  total: 0,
  query: {
    limit: 20,
    page: 1,
    order: null,
    name: null
  },
  data: [
    {
      id: '1',
      name: '采集器<127.0.0.1>',
      state: '空闲'
    }
  ]
})

const service = axios.create({
  // baseURL: import.meta.env.VE_API_URL,
  timeout: 30 * 1000
})

const init = () => {
  table.value.data = []
  for (let i = 0; i < IP_LIST.length; i++) {
    const response = service({
      url: IP_LIST[i] + '/networkflow/video/_status',
      method: 'get'
    })
    response.then((result) => {
      const nameResponse = service({
        url: IP_LIST[i] + '/networkflow/video/_name',
        method: 'get'
      })
      nameResponse.then((nameResult) => {
        table.value.data.push(
          {
            id: i + 1,
            name: nameResult.data + '<' + new URL(IP_LIST[i]).hostname + '>',
            state: result.data === 0 ? '空闲' : '访问'
          }
        )
        table.value.data.sort((a, b) => a.id - b.id)
      })
    }).catch(() => {
      table.value.data.push(
        {
          id: i + 1,
          name: '采集器<' + new URL(IP_LIST[i]).hostname + '>',
          state: '离线'
        }
      )
      table.value.data.sort((a, b) => a.id - b.id)
    })
  }
}

init()

</script>
